﻿<!DOCTYPE html>
<html>
<head>

	<link rel="stylesheet" type="text/css" href="stokker/media/css/style.css" />
	<script type="text/javascript" src="stokker/Scripts/jquery-1.7.1-vsdoc.js"></script>
	<script type="text/javascript" src="stokker/Scripts/knockout.js"></script>
	<script type="text/javascript" src="stokker/Scripts/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="stokker/Scripts/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="stokker/Scripts/knockout.debug.js"></script>
	<script type="text/javascript" src="stokker/Scripts/jquery.marquee.js"></script>
	<script type="text/javascript" src= "http://localhost:9000/nowjs/now.js"></script>
	<script type="text/javascript">
		now.name = prompt("What´s your name?", "");
	</script>

	<title>Nof Un - Stokker!</title>

</head>
<body>
	<section id="chat">
		<div id="chatWindow">
			<p>In-game chat</p>
			<div data-bind="foreach: message, visible: message().length > 0">
				<p data-bind="text: message"></p>
			</div>
		</div>
		<form data-bind="submit: addMessage">
			<input id="msg" data-bind="value: newMessage" placeholder="Your message..." />
			<input type="submit" value="Send"/>
		</form>
	</section>

	<header>
		<h1>Stokker: Nof Un stock game</h1><br />
		<h3>User: </h3><h3 data-bind="text: user"></h3><br />
		<h3>Credit: </h3><h3 type="text" data-bind="text: userBudget + userCredit()" ></h3>

			<!--<marquee  id="stockListMarquee" class="html-marquee" direction="left" behavior="scroll" scrollamount="4" >
				<span data-bind="text: EPIC"></span><img data-bind="attr: {src: 'stokker/media/img/' + signImg }" />
			</marquee>-->
<!--		<ul id="scroller" data-bind="foreach: stockList">
			<li><span data-bind="text: EPIC"></span><img data-bind="attr: {src: 'stokker/media/img/' + signImg }" /></li>
		</ul>-->



		<div id="timer"><p>&nbsp;&nbsp;:&nbsp;&nbsp;</p></div>
	</header>

	<section id="main">

		<section id="game">

			<div id="stockListBuy" data-bind="foreach: stockList">
				<div  class="stock">
					<p data-bind="text: companyName"></p><br />
					<p data-bind="text: EPIC"></p><br />
					<p data-bind="text: unitPrice"></p><br />
					<p data-bind="text: change"></p><br />
					<p data-bind="text: stockQty"></p><br />
                    <input type="range" min="0" max="50" value="0" step="1"  data-bind="value: stockQty" onchange="showValue(this.value)" /><br />
					<input type="button" value="Buy" data-bind="click: $parent.buyStock" />
				</div>				
			</div>
           
    	<div id="clear"></div>
        <h3><span id="range">0&nbsp;&nbsp;&nbsp</span>Number of stocks</h3>
			<div id="stockListYourStocks">
				<h2>My stocks</h2>
				<div class="mystock" data-bind="foreach: userStockList, visible: message().length > 0">
				<table>
                    <tbody>
                        <tr >
                            <td data-bind="text: EPIC"></td>
                            <td data-bind="text: stockQty"></td>
                            <td><input type id="sellQty" ="text" data-bind="value: sellQty"/></td>
                            <td><input type="button" value="Sell" data-bind="click: $parent.sellStock" /><br /></td>
					        <td><input type="button" value="SellALL" data-bind="click: $parent.sellAllStock" /></td>
                        </tr> 
                    </tbody>
                </table>
			</div>
		</section>
	
	</section>
	<div id="clear"></div>
	<footer>fótur</footer>



</body>

 <script type="text/javascript">
     function showValue(newValue) {
         document.getElementById("range").innerHTML = newValue;
     }
</script>

<script type="text/javascript" src="client.js"></script>

</html>

